<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>账号列表</span>
    </div>
    <el-table
      ref="FormData"
      :data="FormData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="account" label="账号"> </el-table-column>
      <el-table-column prop="userGroup" label="用户组"></el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">{{
          scope.row.ctime | normalizeYmd
        }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-dialog title="用户信息编辑" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="账号">
                <el-input v-model="form.account" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户组">
                <el-select
                  v-model="form.userGroup"
                  placeholder="请选择活动区域"
                >
                  <el-option label="超级管理员" value="超级管理员"></el-option>
                  <el-option label="普通管理员" value="普通管理员"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                @click="
                  dialogFormVisible = false;
                  cancelEditing();
                "
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="
                  dialogFormVisible = false;
                  handleEdit(scope.row);
                "
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <el-button
            size="mini"
            @click="
              dialogFormVisible = true;
              Dataecho(scope.row);
            "
            >编辑</el-button
          >
          <!-- 删除 -->
          <!-- cancel取消事件  confirm确定事件-->
          <el-popconfirm
            title="是否确定删除？"
            @cancel="CancelDeletion"
            @confirm="handleDelete(scope.row)"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-popover placement="top" width="160" v-model="visible">
      <p>您确定要批量删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button
          size="mini"
          type="text"
          @click="
            visible = false;
            CancelBatchDeletion();
          "
          >取消</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="
            visible = false;
            toggleSelection(multipleSelection);
          "
          >确定</el-button
        >
      </div>
      <el-button
        type="danger"
        size="mini"
        slot="reference"
        @click="visible = false"
        >批量删除</el-button
      >
    </el-popover>
    <el-button type="primary" size="mini" @click="toggleSelection()"
      >取消选中</el-button
    >
  </el-card>
</template>

<script>
import { getAccountList, deleteAccount, editAccount, batchdelAccount } from '@/api/user';
export default {
  data () {
    return {
      FormData: [],
      form: {
        account: '',
        userGroup: ''
      },
      currentPage: 1,
      pageSize: 3,
      dialogFormVisible: false,
      total: 0,
      multipleSelection: [],
      visible: false,
    }
  },
  methods: {
    // 数据
    async getData () {
      let res = await getAccountList({ currentPage: this.currentPage, pageSize: this.pageSize })
      let { total, data } = res.data
      this.total = total
      if (data.length == 0 && this.currentPage != 1) {
        this.currentPage -= 1
        this.getData()
        return
      }
      this.FormData = data
    },

    // 当选择项发生变化时会触发该事件
    handleSelectionChange (val) {
      let arr = []
      val.forEach(item => arr.push(item.id))
      this.multipleSelection = arr
    },
    //编辑数据回显
    Dataecho (row) {
      this.form = { ...row }
    },
    //编辑
    async handleEdit (row) {
      let res = await editAccount({ id: row.id, account: this.form.account, userGroup: this.form.userGroup })
      let { code, msg } = res.data
      if (code == 0) {
        this.getData()
      }
    },
    //取消编辑
    cancelEditing () {
      this.$message('已取消编辑')
    },
    // 删除
    async handleDelete (row) {
      let res = await deleteAccount({ id: row.id })
      let { code, msg } = res.data
      if (code == 0) {

        this.getData()
      }
    },
    //取消删除
    CancelDeletion () {
      this.$message('已取消删除')
    },
    // 改变时会触发	每页条数
    handleSizeChange (val) {
      this.pageSize = val
      // 重新拉取数据
      this.getData()
    },
    // 改变时会触发	当前页
    handleCurrentChange (val) {
      this.currentPage = val
      // 重新拉取数据
      this.getData()
    },
    //批量删除和取消选中
    async toggleSelection (rows) {
      if (rows) {
        let ids = JSON.stringify(rows)
        let res = await batchdelAccount({ ids })
        let { code, msg } = res.data
        if (code == 0) {

          //重新拉取数据
          this.getData()
        }
      } else {
        this.$refs.FormData.clearSelection()
      }
    },
    CancelBatchDeletion () {
      this.$message('已取消批量删除')
    }
  },
  created () {
    this.getData();
  },
}
</script>

<style lang="less" scoped>
.el-pagination {
  margin: 20px 0px;
}
.form {
  /deep/.el-input__inner {
    width: 350px;
  }
}
/deep/.el-button {
  margin-right: 5px;
}
</style>